<template>
    <form method="post">
        <div style="width: 100%; overflow: auto">
            <div style="width: 5px; height: 100%; float: left; background-color: #356cb3"><font style="font-size: 30px">&nbsp;</font></div>
            <div style="width: 50%; height: 100%; float: left"><font style="font-size: 25px; font-family: 微软雅黑">基本信息</font></div>
            <div style="width: 45.8%; height: 100%; float: left; text-align: right; margin-right: 5px">
                <font style="font-size: 20px; font-family: 微软雅黑; color: #356cb3">单位：万元、公顷</font>
            </div>
            <div style="width: 4%; height: 100%; float: right; text-align: right"></div>
        </div>
        <!-- <el-divider class="divider_top"></el-divider> -->
        <div>
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="村名称" prop="xmname" style="width: 96%">
                            <el-input v-model="ruleForm.xmname" placeholder="请填写村名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="开发前后" prop="xmlocation">
                            <el-input v-model="ruleForm.xmlocation" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="总面积" prop="xmtype">
                            <el-input v-model="ruleForm.xmlocation" style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-tabs type="border-card" id="id_tabs">
                    <!-- 农用地 -->
                    <el-tab-pane>
                        <span slot="label" class="tabPaneJhtz"><font class="lableFont"> 农用地</font></span>
                        <div style="height: 8px"></div>
                        <div class="app-container">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="合计" prop="ztz">
                                        <el-input v-model="ruleForm.ztz" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <div class="jsxx_title">耕地：</div>
                            <br />
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="小计" prop="jhjssmj">
                                        <el-input v-model="ruleForm.jhjssmj" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="水田" prop="jhjssmj">
                                        <el-input v-model="ruleForm.jhjssmj" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="旱地" prop="jhjssmj">
                                        <el-input v-model="ruleForm.jhjssmj" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="其他耕地" prop="jhjssmj">
                                        <el-input v-model="ruleForm.jhjssmj" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <br />
                            <div class="jsxx_title">园地：</div>
                            <br />
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="小计" prop="jhjssmj">
                                        <el-input v-model="ruleForm.jhjssmj" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="果园" prop="jhjssmj">
                                        <el-input v-model="ruleForm.jhjssmj" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="花园" prop="jhjssmj">
                                        <el-input v-model="ruleForm.jhjssmj" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="其他园地" prop="jhjssmj">
                                        <el-input v-model="ruleForm.jhjssmj" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <br />
                            <div class="jsxx_title">林地：</div>
                            <br />
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="林地" prop="ztz">
                                        <el-input v-model="ruleForm.ztz" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <br />
                            <div class="jsxx_title">其他农用地：</div>
                            <br />
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="小计" prop="jhjssmj">
                                        <el-input v-model="ruleForm.jhjssmj" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="村道路" prop="jhjssmj">
                                        <el-input v-model="ruleForm.jhjssmj" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="坑塘水面" prop="jhjssmj">
                                        <el-input v-model="ruleForm.jhjssmj" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="设施农用地" prop="jhjssmj">
                                        <el-input v-model="ruleForm.jhjssmj" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="沟渠" prop="jhjssmj">
                                        <el-input v-model="ruleForm.jhjssmj" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-tab-pane>

                    <!-- 建设用地 -->
                    <el-tab-pane>
                        <span slot="label" class="tabPaneJhjs"><font class="lableFont"> 建设用地</font></span>
                        <div style="height: 8px"></div>
                        <div class="app-container">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="合计" prop="jhjsztz">
                                        <el-input v-model="ruleForm.jhjsztz" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <br />
                            <div class="jsxx_title">特殊用地：</div>

                            <br />
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="小计" prop="jhjssmj">
                                        <el-input v-model="ruleForm.jhjssmj" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="殡葬用地" prop="jhjssmj">
                                        <el-input v-model="ruleForm.jhjssmj" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <br />

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="其他建设用地" prop="jhjssmj">
                                        <el-input v-model="ruleForm.jhjssmj" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-tab-pane>

                    <!-- 未利用地 -->
                    <el-tab-pane>
                        <span slot="label" class="tabPaneJhxz"><font class="lableFont"> 未利用地</font></span>
                        <div style="height: 8px"></div>
                        <div class="app-container">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="合计" prop="jhxzstmj">
                                        <el-input v-model="ruleForm.jhjsztz" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="其他草地" prop="jhxzstdj">
                                        <el-input v-model="ruleForm.jhjskfgm" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="水域及水利设施用地" prop="jhxzstmj">
                                        <el-input v-model="ruleForm.jhjsztz" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="其他未利用地" prop="jhxzstdj">
                                        <el-input v-model="ruleForm.jhjskfgm" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-tab-pane>
                    <!-- 新增耕地 -->
                    <el-tab-pane>
                        <span slot="label" class="tabPaneJhxz"><font class="lableFont"> 新增耕地</font></span>
                        <div style="height: 8px"></div>
                        <div class="app-container">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="新增耕地" prop="jhxzstmj">
                                        <el-input v-model="ruleForm.jhjsztz" style="width: 90%"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-tab-pane>
                </el-tabs>
                <br />
                <el-row>
                    <el-col :span="24" style="text-align: center">
                        <el-button @click="getList()" class="bthNormal">保存</el-button>
                        <el-button @click="getList()" class="bthNormal">关闭</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </form>
</template>

<script>
export default {
    data() {
        var checkNum = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('数字不能为空'));
            }
            if (isNaN(value)) {
                return callback(new Error('请输入数字值'));
            }
            callback();
        };
        return {
            ruleForm: {
                xmname: '',
                xmlocation: '',
                xmtype: '',
                jgmj: '',
                jgmjhd: '',
                jgmjhgs: '',
                jgmjgzst: '',
                datekg: '',
                datejg: '',
                ssdw: '',
                sgdw: '',
                jldw: '',
                jhztz: '',
                dfzj: '',
                zyfcfy: '',
                dffcfy: '',
                ztz: '',
                sgfy: '',
                qtfy: '',
                mjtz: '',
                zjly: '',
                jhjsztz: '',
                jhjskfgm: '',
                jhjssmj: '',
                jhxzmj: '',
                jhxzdj: '',
                jhxzstmj: '',
                jhxzstdj: ''
            },
            rules: {
                xmname: [
                    { required: true, message: '请输入项目名称', trigger: 'blur' }
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                xmlocation: [{ required: true, message: '请填写项目区位', trigger: 'change' }],
                //region: [{ required: true, message: '请填写所在县', trigger: 'change' }],
                xmtype: [{ required: true, message: '请选择项目类型', trigger: 'change' }],
                jgmj: [{ required: true, validator: checkNum, trigger: 'blur' }],
                jgmjhd: [{ required: true, validator: checkNum, trigger: 'blur' }],
                jgmjhgs: [{ required: true, validator: checkNum, trigger: 'blur' }],
                jgmjgzst: [{ required: true, validator: checkNum, trigger: 'blur' }],
                datekg: [{ required: true, message: '请选择立项时间', trigger: 'change' }],
                datejg: [{ required: true, message: '请选择拟竣工时间', trigger: 'change' }],
                ssdw: [{ required: true, message: '请填写实施单位', trigger: 'change' }],
                sgdw: [{ required: true, message: '请填写施工单位', trigger: 'change' }],
                jldw: [{ required: true, message: '请填写监理', trigger: 'change' }],
                ztz: [{ required: true, validator: checkNum, trigger: 'blur' }],
                sgfy: [{ required: true, validator: checkNum, trigger: 'blur' }],
                qtfy: [{ required: true, validator: checkNum, trigger: 'blur' }],
                mjtz: [{ required: true, validator: checkNum, trigger: 'blur' }],
                jhjsztz: [{ required: true, validator: checkNum, trigger: 'blur' }],
                jhjssmj: [{ validator: checkNum, trigger: 'blur' }],
                jhxzmj: [{ validator: checkNum, trigger: 'blur' }],
                jhxzstmj: [{ validator: checkNum, trigger: 'blur' }]
                // distance: [{ validator: checkNum, trigger: 'blur' }],
                // xmjsq: [{ validator: checkNum, trigger: 'change' }],
                // lxrq: [{ required: true, message: '请选择立项日期', trigger: 'change' }],
                // lxwh: [{ required: true, message: '请选择立项文号', trigger: 'change' }],
                // lxwjmc: [{ required: true, message: '请填写立项文件名称', trigger: 'change' }],
                // lxjg: [{ required: true, message: '请填写立项机关', trigger: 'change' }],
            }
        };
    },
    created() {
        this.init();
        setTimeout(function () {
            $('#tsyd').find('label').eq(0).css('margin-top', '20px');
        }, 100);
    },
    watch: {
        //监听
        $route(to, from) {
            //路由变化方式，路由发生变化，方法就会执行
            this.init();
        }
    },
    methods: {
        init() {
            //判断路径有id值,做修改
            if (this.$route.query && this.$route.query.id) {
                //从路径获取id值
                const id = this.$route.query.id;
                //调用根据id查询的方法
                this.getInfo(id);
            } else {
                //路径没有id值，做添加
                //清空表单
                this.information = {};
            }
        },
        saveOrUpdate() {
            //判断修改还是添加
            //根据teacher是否有id
            if (!this.information.id) {
                //添加
                this.onSubmit();
            } else {
                alert('sss');
                //修改
                this.update();
            }
        },
        onSubmit() {
            label.save(this.information).then((Response) => {
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                });
            });
        },
        tonew() {
            this.information = {};
        },
        shutdown() {
            window.close();
        },
        getInfo(id) {
            label.openInfo(id).then((response) => {
                this.information = response.data;
            });
        },
        update() {
            label.updateInfo(this.$route.query.id, this.information).then((response) => {
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
            });
        }
    }
};
</script>
<style>
.divider_top {
    margin: 0 0 0 0;
    background: 0 0;
    border-top: 1px solid #e6ebf5;
}
#id_tabs div.el-tabs__content {
    padding: 0;
}
.jsxx_title {
    font-family: '微软雅黑';
    color: #356cb3;
    font-size: 25px;
}
</style>